<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>牛舍管理</title>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/screen/css/swiper.min.css}"/>


    <link th:href="@{favicon.ico}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
    <link th:href="@{/dist/css/public.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=3.2.0}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/msg-layer/naranja.min.css}">

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: url(img/ifame-bg.jpg);
        }

        .ifame-main {
            width: 100%;
            height: 100%;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .ifram-btm {
            width: 80%;
            height: 100%;
            border: none;
            margin: 0;
            padding: 0;
            margin-left: 10%;
        }

        .swiper-container-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 60px;
        }

        .swiper-pagination-bullet {
            width: 50px;
            height: 5px;
            border-radius: 2px;
            background: white;
            opacity: 0.4
        }

        .my-bullet-active {
            background: white;
            opacity: 0.8
        }

        .iframe-title {
            width: 100%;
            position: absolute;
            background: linear-gradient(#215aaa, #3b91f3) no-repeat;
            height: 40px;
            line-height: 40px;
            color: #FFF;
            z-index: 999;
        }

        .iframe-title .logo {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            display: inline-block;
            margin-left: 40px;
        }

        .pro-name {
            font-size: 18px;
        }

        .iframe-title .line {
            color: #4d90e1;
            display: inline-block;
            border-right: 1px solid #aac9f4;
            padding: 0px 2px 0px 2px;
            height: 15px;
            line-height: 40px;
            vertical-align: middle;
        }

        .iframe-title .pro-desc {
            font-size: 14px;
            padding-left: 3px;
        }

        .license {
            width: 100%;
            position: absolute;
            background: #2d74cc;
            height: 30px;
            line-height: 30px;
            color: #FFF;
            z-index: 999;
            bottom: 0;
            text-align: center;
            font-size: 14px;
        }

        .right-info {
            float: right;
            margin-right: 40px;
            line-height: 40px;
        }

        .right-info .clock {
            width: 15px;
            vertical-align: middle;
        }

        .right-info .user-name {
            padding-left: 10px;
            vertical-align: middle;
            min-width: 50px;
            background: none;
            color: #FFF;
            border: none;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }

        .right-info .drop-down {
            margin-left: 10px;
            vertical-align: middle;
        }

        .right-info a {
            color: #fff;
            margin-right: 12px;
        }

        #main-content {
            height: calc(100% - 10px);
            padding-bottom: 20px;
            padding-top: 40px;
        }

        .content-tabs {
            width: 80%;
            margin-left: 10%;
            display: none;
        }

        nav.page-tabs {
            width: 100%;
        }

        /*角标 */

        .ii {
            display: none;
            background: #f00;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            top: 0px;
            right: -10px;
            position: absolute;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>

<body th:style="'background-image: url(/img/ifame-bg.jpg)'">
<div class="ifame-main">
    <div class="iframe-title">
        <img class="logo" th:src="@{/screen/img/logo.png}">
        <span class="pro-name">巨山农场鲜活农产品自动化平台</span>
        <span class="line"></span>
        <span class="pro-desc">牛舍</span>
        <div class="right-info">
            <a id="shouye"><i class="fa fa-home"></i> 首页</a>
            <a id="work"><i class="fa fa-legal"></i> 我的工作</a>
            <a id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏显示</a>

            <a id="msg" style="display: inline-block;position: relative"><span id="msgNum" class="ii"></span> <i class="fa fa-commenting"></i></a>

            <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                <span class="hidden-xs">[[${user.dept.deptName}]] [[${user.userName}]]</span>
            </a>

            <a th:href="@{/screenLogout?type=2}" title="退出登录"><i class="fa fa-outdent"></i> 退出登录</a>
        </div>
    </div>

    <div id="main-content">
        <div class="content-tabs">
            <nav class="page-tabs menuTabs">
                <div class="page-tabs-content">
                    <a href="javascript:;" class="active menuTab" data-id="/system/main">首页</a>

                </div>
                <div class="page-tabs-content" style="float: right;margin-top: 6px">
                    <a href="javascript:window.history.back();" class="btn btn-sm btn-success back"
                       style="float:right;margin-right: 32px;display: none;color: white">返回</a>
                </div>
            </nav>
        </div>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <iframe id="iframe1" class="ifram-btm" th:src="@{/system/ncOutputMilk/niushe1}"></iframe>
                </div>
                <div class="swiper-slide">
                    <iframe class="ifram-btm" th:src="@{/system/ncChickenWorkNotice/niushe2}"></iframe>
                </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <iframe id="work_iframe" name="iframe0" class="ifram-btm RuoYi_iframe" style="display: none"></iframe>
    </div>
    <div class="license">
        ©Copyright (c) [[${copyrightYear}]] 北京市巨山农场农业信息化管理平台
    </div>
</div>

<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:src="@{/msg-layer/naranja.js}"></script>

<script th:src="@{/screen/js/swiper.min.js}"></script>

<script th:src="@{/ruoyi/js/my-common-js.js}"></script>
<!--<script th:src="@{/ruoyi/index.js}"></script>-->

<script th:src="@{/webjars/sockjs-client/1.0.2/sockjs.min.js}"></script>
<script th:src="@{/webjars/stomp-websocket/2.3.3/stomp.min.js}"></script>
<script th:src="@{/msg-layer/naranja.js}"></script>

<script th:inline="javascript">
    $("#user-select").change(function () {
        console.log($(this).children('option:selected').val())
    });

    var ctx = [[@{
        /}]];
        /*消息角标*/
        $.ajax({
            type: "GET",
            url: ctx + 'system/getMsgCount',
            dataType: "json",
            success: function (data) {
                if (data == 0) {
                    $("#msgNum").hide();
                } else {
                    $("#msgNum").show();
                    $("#msgNum").text(data)
                }

            }

        })

        var mySwiper;

        function init() {
            mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项

                autoplay: {
                    delay: 6000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    bulletActiveClass: 'my-bullet-active',
                    clickable: true,
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })

        }

        init();


        // 全屏显示
        $('#fullScreen').on('click', function () {
            $(document).toggleFullScreen();
        });
        $('#work').on('click', function () {
            $('.swiper-container').hide();
            $('.content-tabs').show();
            $('#work_iframe').show();
            $('#work_iframe').attr('src', ctx + 'system/ncWorkNotice');
            $("#main-content").css("height", 'calc(100% - 48px)');
        });
        $('#msg').on('click', function () {
            $('.swiper-container').hide();
            $('.content-tabs').hide();
            $('#work_iframe').show();
            $('#work_iframe').attr('src', ctx + 'system/notice2');
            $("#main-content").css("height", 'calc(100% - 10px)');
        });
        $('#shouye').on('click', function () {
            $('.swiper-container').show();
            $('.content-tabs').hide();
            $('#work_iframe').hide();

            $("#main-content").css("height", 'calc(100% - 10px)');
            init();
        });


</script>

<script th:inline="javascript">

    var stompClient = null;

    var userId = [[${user.userId}]]

    //连接到socket服务器
    function connect() {
        var socket = new SockJS('/gs-guide-websocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            //接收服务端发送给/topic/greetings的订阅信息
            stompClient.subscribe('/topic/imsg', function (msg) {
                addmsg(msg);
            });
        });

        //断开连接
        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }

            //向服务器发送信息
            function sendHello() {
                stompClient.send("/app/sendimsg", {}, "hello server");
            }

        }

    }

    function addmsg(msg) {


        var m = JSON.parse(msg.body);

        var u1 = "," + userId + ",";

        var us = "," + m.userId + ",";
        if (m.noticeId && m.deptId == 1) {
            newmsg(m);
        } else if (us.indexOf(u1) >= 0) {
            newmsg(m)
        }

    }

    function newmsg(m) {
        narn("success", m);
    }


    $('.send').click(function () {
        var word = $('.input').val();
        stompClient.send("/app/sendimsg", {}, word);
    });

    function narn(type, m) {
        naranja()[type]({
            title: m.noticeTitle,
            text: m.noticeContent,
            timeout: 'keep'
        })
    }

    connect();
</script>
</body>
</html>
